<template>
  <div class="rank">
    <div class="ranklist" v-for="rank of rankList" :key="rank.topId">
      <img :src="rank.picUrl" width="100" />
      <ul class="content">
        <li class="item" v-for="(song,index) of rank.song" :key="index">{{++index}}.{{song.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rankList: [],
    };
  },
  created() {
    this.fetchRankList();
  },
  methods: {
    // fetchRankList() {
    //   axios
    //     .get("/top/category", {
    //       params: {
    //         showDetail: 1,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res.data.data);
    //       this.rankList = res.data.data;
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    // },

    async fetchRankList() {
      const res = await this.$http.get("/top/category", {
        params: { showDetail: 1 },
      });
      console.log(res);
      this.rankList = res.data.data;
      this.rankList = res.data.data.reduce(
        (total, item) => total.concat(item.list),
        []
      );
      console.log(this.rankList);
    },
  },
};
</script>

<style scoped>
.ranklist {
  display: flex;
  margin-left: 40px;
  margin-top: 30px;
}
.content {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 30px;
  color: rgba(26, 26, 26, 26);
  font-size: 0.8571rem;
}
.item {
  width: 100px;
}
</style>